// tailwind.config.js
const colors = require('tailwindcss/colors')

module.exports = {
    purge: [
        './src/**/*.html',
        './src/**/*.js',
        './src/**/*.vue',

      ],
    darkMode: false, // or 'media' or 'class'
    theme: {
        screens: {
          sm: '480px',
          md: '768px',
          lg: '976px',
          xl: '1024px',
          '2xl': '1280px',
          '3xl': '1440px',
          '4xl': '100%',

        },
        container:{
          center:true
        },
        colors: {
            transparent: 'transparent',
            current: 'currentColor',
            black: colors.black,
            white: colors.white,
            gray: colors.trueGray,
            indigo: colors.indigo,
            red: colors.rose,
            yellow: colors.amber,
            blue:colors.blue,
            green:colors.green,
            "font-color":"#2469e5",
            "zf-color":"#f4f4f4",
            "linear-blue":"linear-gradient(90deg, #649aff, #1a5be6b0)"
        },

        fontFamily: {
          sans: ['Graphik', 'sans-serif'],
          serif: ['Merriweather', 'serif'],
        },
        fontSize: {
          'xs': '.75rem',
          'sm': '.875rem',
          'tiny': '.875rem',
           'base': '1rem',
           'lg': '1.125rem',
           'xl': '1.25rem',
           '2xl': '1.5rem',
          '3xl': '1.875rem',
          '4xl': '2.25rem',
           '5xl': '3rem',
           '6xl': '4rem',
          '7xl': '5rem',
         },
        extend: {
          spacing: {
            '128': '32rem',
            '144': '36rem',
          },
          borderRadius: {
            '4xl': '2rem',
          },
          backgroundImage: {
            'hero-pattern': "linear-gradient(90deg, #649aff, #1a5be6b0)",
           }
        }
      },
    variants: {
        extend: {},
    },
    plugins: [],
}